<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页中滚动的图片</title>
		<style type="text/css">
			#demo{
				width: 500px;
				background-color: #0077AA;
				/* 自动出现滚动条 */
				/* overflow: auto; */
				/* 滚动条隐藏,前提是盒子和图片的高度一样 */
				overflow: hidden;
				/* 不换行 */
				white-space: nowrap;
				height: 200px;
			}
			#one>img,#two>img{
				width: 150px;
			}
			
			 .scrollbar {
			  width : 300px;
			  height: 30px;
			  margin: 0 auto;
			  }
			  .test-1::-webkit-scrollbar {
			  /*滚动条整体样式*/
			  width : 1px;  /*高宽分别对应横竖滚动条的尺寸*/
			  height: 10px;
			  }
			  .test-1::-webkit-scrollbar-thumb {
			  /*滚动条里面小方块*/
			  border-radius: 10px;
			  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
			  background   : #535353;
			  }
			  .test-1::-webkit-scrollbar-track {
			  /*滚动条里面轨道*/
			  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
			  border-radius: 10px;
			  background   : #ededed;
			  }
			
		</style>
	</head>
	<body>
		<div id="demo" class="test-1">
			<span id="one">
				<img src="img/a.png" >
				<img src="img/b.png" >
				<img src="img/c.png" >
				<img src="img/d.png" >
				<img src="img/e.png" >
				<img src="img/f.png" >
				<img src="img/g.png" >
				<img src="img/h.png" >
			</span>
			<span id="two"></span>
			<div class="scrollbar"></div>
		</div>
		
		
		
		
		
		<script src="js/网页中滚动的图片.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
